<template>
  <div class="edu-page-warp">
    <el-breadcrumb separator="/" style="margin-bottom:15px;">
        <el-breadcrumb-item>
            <span  @click="handleSelect('0')" :style="[{'font-weight':(queryItem.isOverseas === '0' ? 'bold': 'normal')}, {'cursor': 'pointer'}]" >{{ '中国生注册统计' }}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
            <span  @click="handleSelect('1')" :style="[{'font-weight':(queryItem.isOverseas === '1' ? 'bold': 'normal')}, {'cursor': 'pointer'}]" >{{ '国际生注册统计' }}</span>
        </el-breadcrumb-item>
    </el-breadcrumb>
    <condition-card @reset="resetTaskSubmit" @search="filterTaskSubmit" >
      <el-row :gutter="24" style="height: 50px;">
        <el-col :span="8">
          <el-form-item :label="$t('label.schoolTerm')" >
             <CalendarSelect v-model="queryItem.calendarId"></CalendarSelect>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="发布状态" >
            <el-select v-model="queryItem.templateStatus" style="width: 80%;">
            <el-option label="全部" value=""></el-option>
            <el-option label="未发布" value="0"></el-option>
            <el-option label="已发布" value="1"></el-option>
            <el-option label="已开始" value="2"></el-option>
          </el-select>
          </el-form-item>
        </el-col> -->
      </el-row>
    </condition-card>
    <el-card v-loading="loading" shadow="never" body-style="padding: 24px;">
      <div class="edu-opertion-bar">
        <div class="float-left">
            <div class="edu-page-title mg-top">
                {{ queryItem.isOverseas === '0' ? '中国生注册统计' : '国际生注册统计'}}
            </div>
        </div>
        <div class="float-right">
          <el-button @click="exportAllStuRegisterSta">导出</el-button>
        </div>
      </div>
       <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="index"
                label="序号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="collegeName"
                label="学院"
                align="center"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="硕士" align="center">
                <el-table-column
                    prop="masterSum"
                    label="总数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="masterRegistered"
                    label="已注册"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="masterNotRegistered"
                    label="未注册"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="masterRegisterRate"
                    label="注册率"
                    align="center">
                </el-table-column>
            </el-table-column>
            <el-table-column label="博士" align="center">
                <el-table-column
                    prop="doctorSum"
                    label="总数"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="doctorRegistered"
                    label="已注册"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="doctorNotRegistered"
                    label="未注册"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="doctorRegisterRate"
                    label="注册率"
                    align="center">
                </el-table-column>
            </el-table-column>
        </el-table>
      <div class="edu-pagination">
        <!--<div class="float-left">-->
          <!--<span class="edu-total">Total: {{ queryItem.total_ }}</span>-->
        <!--</div>-->
        <!-- <div class="float-right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryItem.pageNum_"
            :page-sizes="[20, 50, 100, 500,1000]"
            :page-size="queryItem.pageSize_"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryItem.total_"
            style="float:right;margin-top:10px"
          ></el-pagination>
        </div> -->
      </div>
    </el-card>
  </div>
</template>
<script>
  import {
    getAllStuRegisterSta,
    exportAllStuRegisterSta
  } from "common/src/api/welcomeService/checkInStatistics";
  import SchoolCalendarApi from "common/src/api/calendars";
  import Bus from 'common/src/utils/bus'
  import filters from "common/src/filters";

  export default {
    name: "NewerTasks",
    data() {
      const getGrade = (function() {
        let now = new Date().getFullYear();
        let years = [];
        for (let i = 0; i < 3; i++) {
          years.push({
            label: now + i,
            value: now + i
          });
        }
        return years;
      })();
      return {
        loading: false,
        queryItem: {
          calendarId:  "",
          isOverseas: "0",
          pageNum_: 1,
          total_: 0,
          pageSize_: 20
        },
        tableData: [],
        currentCalendarId: '', //当前学年学期
      };
    },
    components: {
    },
    filters: {
      formatDate(date) {
        return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
      },
      templateStatus(status) {
        return filters.templateStatus(status);
      },
      taskTrainingLevelList(obj) {
        return filters.taskTrainingLevelList(obj);
      },
      studentAbroad(val) {
        return filters.studentAbroad(val);
      }
    },
    mounted () {
        // 获取列表信息
        this.getCurrentTermCalendar().then(resp => {
            this.currentCalendarId = resp.data.schoolCalendar.id;
            this.queryItem.calendarId = resp.data.schoolCalendar.id;
            this.getAllStuRegisterSta()
        });
    },
    methods: {
      handleSelect(val) {
          this.queryItem.isOverseas = val
          this.getAllStuRegisterSta()
      },
      // 获取当前学年学期
    async getCurrentTermCalendar(){
      return await SchoolCalendarApi.currentTermCalendar();
    },
      // 查询注册统计
      getAllStuRegisterSta() {
           getAllStuRegisterSta(this.queryItem)
            .then(res => {
                if(res.code === 200) {
                    this.tableData = res.data
                }
            })
            .catch((error) => {
                 this.$message({
                    message: error,
                    type: "error"
                });
            });
      },
      // 导出注册统计
      exportAllStuRegisterSta() {
          exportAllStuRegisterSta(this.queryItem)
            .then(res => {
                // if(res.code === 200) {
                //     this.tableData = res.data
                // }
            })
            .catch((error) => {
                 this.$message({
                    message: error,
                    type: "error"
                });
            });
      },
      filterTaskSubmit() {
        this.queryItem.pageNum_ = 1;
        this.getAllStuRegisterSta(this.queryItem);
      },
      resetTaskSubmit() {
        this.queryItem.pageNum_ = 1;
        this.queryItem.calendarId = this.currentCalendarId;
        this.getAllStuRegisterSta(this.queryItem);
      },
      handleSizeChange(val) {
        this.queryItem.pageSize_ = val;
        this.queryItem.pageNum_ = 1;
        this.initPage(this.queryItem);
      },
      handleCurrentChange(val) {
        this.queryItem.pageNum_ = val;
        this.initPage(this.queryItem);
      },
      handleIconClick() {
      },
    },
    activated() {      
    //   this.initPage(this.queryItem);
    },
    created() {
    //   Bus.$on('editSuccess', res => {
    //     if(res.code === 200) {
    //       this.initPage(this.queryItem);
    //     }
    //   })
    }
  };
</script>

<style>


</style>
